<template>
    <div :class="`tech-count-control ${mode} ${size} ${isDisable ? 'disable' : ''}`">
        <div :class="`action-btn ${isDisableMinus ? 'disable' : ''}`" @click="minusCount">
            <MiniIcon name="minussmall" :mode="mode" theme="#333333" :styleMode="styleMode" :size="size === 'mini' ? 14 : 20" />
        </div>
        <div class="count-value title-color">{{count}}</div>
        <div :class="`action-btn ${isDisableAdd ? 'disable' : ''}`" @click="addCount">
            <MiniIcon name="addsmall" :mode="mode" theme="#333333" :styleMode="styleMode" :size="size === 'mini' ? 14 : 20" />
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'CountControl', // 数量控制
    mixins: [ModeMixin],
    props: {
        count: {
            type: Number,
            default: 1,
        },
        max: {
            type: Number,
            default: 99999,
        },
        size: {
            type: String,
            default: 'default', // default、 mini
        },
        isDisable: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        MiniIcon,
    },
    computed: {
        isDisableMinus() {
            return this.$props.count === 1;
        },
        isDisableAdd() {
            return this.$props.count === this.$props.max;
        },
    },
    methods: {
        minusCount() {
            const { count, isDisable } = this.$props;
            if (isDisable) return;
            if (count > 1) {
                this.$emit('minus');
            }
        },
        addCount() {
            const { max, count, isDisable } = this.$props;
            if (isDisable) return;
            if (max === -1 || count < max) {
                this.$emit('add');
            }
        },
    },
};
</script>

<style lang="less">
.tech-count-control {
    .mode-white();
    .flex-row-center();
    border: 1px solid rgba(125,125,131,0.2);
    &.default {
        width: 109px;
        height: 34px;
        border-radius: 19px;
    }
    &.mini {
        width: 91px;
        border-radius: 19px;
        height: 28px;
    }
    &.black {
        .action-btn {
            &.disable {
                opacity: .6;
            }
        }
    }
    &.disable {
        color: rgba(125,125,131,0.2) !important;
        .mini-icon {
            color: rgba(125,125,131,0.2) !important;
        }
    }
    .count-value {
        width: 35%;
        height: 100%;
        .flex-column-center();
        font-size: @font-size;
        border-left: 1px solid rgba(125,125,131,0.2);
        border-right: 1px solid rgba(125,125,131,0.2);
    }
    .action-btn {
        flex: 1;
        .flex-column-center();
        &.disable {
            .mini-icon {
                color: rgba(125,125,131,0.3) !important;
            }
        }
    }
}
</style>

